<template>
	<section v-loading="searchLogining">
		<el-button type="primary" @click="toAdd">新增顶级菜单</el-button>
		<div style="margin-top: 20px;border: 1px solid #b9c8d6;">
			<el-tree
				:data="menuTreeList"
				ref="tree"
				node-key="id"
				:props="defaultProps"
				:default-expanded-keys="expandedKeys"
	      		:expand-on-click-node="false"
	      		@node-expand="expandNode"
	      		@node-collapse="collapseNode">

				<span class="custom-tree-node" slot-scope="{ node, data }">
					<span>{{ node.label }}</span>
					<span>
						<span>{{ data.url }}</span>
						<el-button v-if="data.is_show==1" type="text" size="mini" style="color:#000;">显示</el-button>
						<el-button v-if="data.is_show!=1" type="text" size="mini" style="color:red;">隐藏</el-button>
						<el-button v-if="data.status==1" type="text" size="mini" style="color:#000;">开启</el-button>
						<el-button v-if="data.status!=1" type="text" size="mini" style="color:red;">关闭</el-button>
						<el-button type="text" size="mini" @click="() => append(data)">新增</el-button>
						<el-button type="text" size="mini" @click="() => toedit(data)">编辑</el-button>
					</span>
				</span>
			</el-tree>
		</div>

		<el-dialog :title="menuDialogTitle" :visible.sync="isMenuDialog" width="800px">
			<!-- v-if主要是为了防止第一次加载之后不再重新加载，这边判断显示后直接重新载入 -->
            <components is="menuForm" v-if="isMenuDialog" :parent_id="parent_id" :menu_id="menu_id" @closeDialog="closeDialog"></components>
        </el-dialog>

	</section>
</template>
<script>
import menuForm from './menuForm.vue'
export default {
	data() {
	    return {
	    	menuTreeList:[],
	    	searchLogining:false,
	    	buttonLoading:false,
	    	defaultProps:{
	    		id:'id',
	    		label:'menu_name',
	    		sort:'sort'
	    	},
	    	isMenuDialog:false,
	    	menuDialogTitle:'添加顶级菜单',
	    	parent_id:0,
	    	menu_id:0,
	    	expandedKeys:[],
	    }
	},components:{
        menuForm
    },methods:{
    	expandNode(obj, node, arr){
    		//展开节点保存到默认展开参数
    		this.expandedKeys.push(obj.id);
    	},collapseNode(obj, node, arr){
    		if(this.expandedKeys.length>0){
    			for(var i in this.expandedKeys){
    				if(obj.id==this.expandedKeys[i]){
    					this.expandedKeys.splice(i, 1);
    					break;
    				}
    			}
    		}
    		if(obj.children!=undefined){
    			this.removeDefaultExpand(obj.children);
    		}
    	},removeDefaultExpand(obj){
    		for(var i in obj){
    			for(var j in this.expandedKeys){
    				if(obj[i].id==this.expandedKeys[j]){
    					this.expandedKeys.splice(j, 1);
    					break;
    				}
    			}
    			if(obj[i].children!=undefined){
	    			this.removeDefaultExpand(obj[i].children);
	    		}
    		}
    	},getMenuTreeList(){
			var url = '/admin/menu/getTreeLists';
            var token = this.Common.cookie('token');
            var data = {'token':token}
            var tar = this;
            tar.searchLogining = true;
			tar.Common.request(url, data, function(data){
	        	tar.searchLogining = false;
	        	if(data.success_code==0){
	        		tar.$message({
						title: '警告',
						message: data.message,
						type: 'error'
					});
	        	}else{
	        		tar.menuTreeList = data.result.lists;
	        	}
	        },function(data){
	        	var message = '接口请求失败';
	        	if(data.message){
	        		message = data.message;
	        	}
	        	tar.searchLogining = false;
				tar.$message({
					title: '警告',
					message: message,
					type: 'error'
				});
	        },this);
		},closeDialog(){
			this.isMenuDialog=false;
			this.getMenuTreeList();
		},toAdd(){
			this.isMenuDialog=true;
	    	this.menuDialogTitle='添加顶级菜单';
	    	this.parent_id=0;
	    	this.menu_id = 0;
		},append(data) {
			this.isMenuDialog=true;
	    	this.menuDialogTitle='添加子菜单';
	    	this.parent_id=data.id;
	    	this.menu_id = 0;
		},toedit(data){
			this.isMenuDialog=true;
	    	this.menuDialogTitle='编辑菜单';
	    	this.parent_id=data.parent_id;
	    	this.menu_id = data.id;
		}
    },mounted(){
		this.getMenuTreeList();
	}
}
</script>
<style>
.custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
}
</style>